<template>
  <div class="content">
    <!-- 筛选区域 -->
    <el-row>
      <el-form>
        <el-col :span="8">
          <el-form-item>
            <span>销售员姓名</span>
            <el-input v-model="query.real_name" class="el-input-name" placeholder="请输入销售员姓名筛选" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <span>联系方式</span>
            <el-input v-model="query.telephone" placeholder="请输入联系方式筛选" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" plain class="filter" @click="getAgent">筛选</el-button>
          <el-button type="primary" plain class="reset" circle @click="reload">
            <i class="el-icon-refresh-right" />
          </el-button>
        </el-col>
      </el-form>
    </el-row>
    <!-- 按钮 -->
    <el-button class="binding-sales" type="primary" @click="saleDialogVisible=true">绑定销售</el-button>
    <!-- 表格 -->
    <el-table
      height="66vh"
      :data="agentList"
      style="width: 100%"
      :header-cell-style="{ color: 'black' }"
    >
      <el-table-column label="销售员姓名">
        <template v-slot="scope">{{ scope.row.real_name }}</template>
      </el-table-column>
      <el-table-column label="联系方式">
        <template
          v-slot="scope"
        >{{ scope.row.get_wechat_info.telephone?scope.row.get_wechat_info.telephone:'---' }}</template>
      </el-table-column>
      <el-table-column label="微信名称">
        <template v-slot="scope">{{ scope.row.get_wechat_info.nickname }}</template>
      </el-table-column>
      <el-table-column label="绑定日期">
        <template v-slot="scope">{{ scope.row.created_at }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="jumpUrl(scope.row.wechat_user_uid)">查看</el-button>
          <el-button type="text" @click="deleteAgent(scope.row.wechat_user_uid)">解除绑定</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="dingwei">
      <el-pagination
        :current-page="query.page"
        :page-sizes="$arrays.tableSize"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹出框 -->
    <el-dialog
      title="绑定销售"
      :visible.sync="saleDialogVisible"
      width="30%"
      :before-close="saleHandleClose"
    >
      <el-form ref="saleForm" class="sale" :model="params" :rules="saleRules">
        <el-form-item>
          <div class="binding-sale">联系方式</div>
        </el-form-item>
        <el-form-item class="saleTelephone" prop="telephone">
          <el-input v-model="params.telephone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item style="margin-left:24px">
          <el-button type="primary" plain @click="getAgentUser">搜索</el-button>
        </el-form-item>
      </el-form>
      <div style="min-height:40px">
        <div v-if="agentUser">
          <!-- 线条 -->
          <div style="background-color:#DCDFE6;height:1px;margin-top:14px;margin-bottom:35px" />
          <!-- 头像区域 -->
          <div class="head-portrait">
            <div class="head">
              <img :src="agentUser.avatar" alt>
            </div>
            <div class="name">{{ agentUser.nickname }}</div>
          </div>
          <!-- 真实姓名 -->
          <div class="real-name">
            <div class="title">真实姓名</div>
            <el-input v-model="real_name" placeholder="请输入真实姓名" />
          </div>
          <!-- 说明字段 -->
          <div class="explain">
            <div>1. 销售员只能被一家商户所绑定；</div>
            <div>2. 销售员被绑定后自动生效，微信不会收到任何通知；</div>
            <div>3. 绑定成功的销售员可在微信小程序【我的】查看到【销售管理】功能模块。</div>
          </div>
          <!-- 提交 -->
          <div class="dialog-footer">
            <el-button type="primary" @click="setAgentBind">确 定</el-button>
            <el-button style="margin-right:20px" @click="saleHandleClose">取 消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAgent, getAgentUser, setAgentBind, deleteAgent } from '@/api/smallProgram'
export default {
  name: 'SmallProgramSale',
  data() {
    // 判断电话号码是否通过
    var telephonePass = (rule, value, callback) => {
      var tel = /^[1][3,4,5,7,8][0-9]{9}$/
      if (value === '') {
        callback(new Error('电话号码不能为空'))
      } else if (!tel.test(value)) {
        callback(new Error('电话号码格式不正确'))
      } else {
        callback()
      }
    }
    return {
      agentList: [],
      query: {
        limit: 20, // 每页数量
        page: 1, // 页码
        real_name: '',
        telephone: ''
      },
      saleDialogVisible: false,
      total: null,
      params: {
        telephone: ''
      },
      agentUser: null,
      real_name: null,
      saleRules: {
        telephone: [{ validator: telephonePass, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getAgent()
  },
  methods: {
    getAgent() {
      getAgent(this.query).then((res) => {
        console.log(res)
        this.agentList = res.data.data.data
        this.total = res.data.data.total
      })
    },
    handleSizeChange(newPageSize) {
      this.query.limit = newPageSize
      this.getAgent()
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getAgent()
    },
    getAgentUser() {
      this.$refs.saleForm.validate((valid) => {
        if (valid) {
          getAgentUser(this.params).then((res) => {
            this.agentUser = res.data.data
            console.log(this.agentUser)
          })
        }
      })
    },
    // 重置
    reload() {
      this.query = {
        limit: 20, // 每页数量
        page: 1, // 页码
        real_name: '',
        telephone: ''
      }
      this.getAgent()
    },
    // 查看
    jumpUrl(uid) {
      this.$router.push({ name: 'smallProgramDetails', query: { uid: uid }})
    },
    // 关闭弹出框触发
    saleHandleClose() {
      this.saleDialogVisible = false
      this.$refs.saleForm.resetFields()
      this.agentUser = null
      this.params = {
        telephone: null
      }
      this.real_name = null
    },
    // 绑定销售
    setAgentBind() {
      const query = {
        wechat_user_uid: this.agentUser.uid,
        real_name: this.real_name
      }
      setAgentBind(query).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '绑定成功',
            duration: 1500,
            showClose: true,
            type: 'success'
          })
          this.saleHandleClose()
          this.getAgent()
        }
      })
    },
    // 解除绑定
    deleteAgent(uid) {
      deleteAgent(uid).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '解除绑定成功',
            duration: 1500,
            showClose: true,
            type: 'success'
          })
          this.getAgent()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
  span {
    font-size: 16px;
    color: black;
    font-weight: bold;
  }
  .el-input {
    width: calc(100% - 128px);
    margin-left: 24px;
  }
  .el-input-name {
    width: calc(100% - 144px);
  }
  .binding-sales {
    margin: 0;
    margin-bottom: 40px;
    font-size: 16px;
  }
}
// 弹出框
.sale {
  font-size: 16px;
  display: flex;
  .saleTelephone {
    width: 60%;
    margin-left: 24px;
    .el-input {
      margin: 0;
      width: 100%;
    }
  }
  .el-button {
    height: 36px;
  }
}
.el-form {
  margin: 0;
  padding: 0;
}
//头像
.head-portrait {
  display: flex;
  .head {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .name {
    font-size: 16px;
    line-height: 32px;
    margin-left: 16px;
  }
}
// 真实姓名
.real-name {
  font-size: 16px;
  display: flex;
  margin-top: 24px;
  .title {
    line-height: 36px;
  }
  .el-input {
    width: 60%;
    margin-left: 24px;
  }
}
// 说明字段
.explain {
  font-size: 14px;
  color: #909399;
  margin-top: 30px;
  div {
    margin-top: 2px;
  }
}
/*确认按钮 */
.dialog-footer {
  height: 36px;
  width: 100%;
  margin-top: 30px;
  .el-button {
    float: right;
  }
}
</style>
<style scoped>
.el-form-item /deep/ .el-form-item__content{
  font-size: 16px;
}
</style>

